import {Cascader,Input,Table,Divider, Button,Popconfirm} from "antd"
import { SearchOutlined , EditOutlined, EyeOutlined,DeleteOutlined } from '@ant-design/icons';
import type { TableRowSelection } from 'antd/es/table/interface';
import type { ColumnsType } from 'antd/es/table';
import {useState,Fragment} from "react"
import "./index.css"
interface DataType {
    key: React.Key;
    name: string;
    age: number;
    address: string;
  }
const columns: ColumnsType<DataType> = [
    {
      title: 'Name',
      dataIndex: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
    },
    {
        title: 'Age',
        dataIndex: 'age',
        defaultSortOrder: 'descend',
        sorter: (a, b) => a.age - b.age,
    },
    {
        title: '分类',
        dataIndex: 'age',
    },
    {
        title: '尺寸',
        dataIndex: 'age',
    },
      {
        title: '链接地址',
        dataIndex: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
    },
    {
        title: '操作',
        dataIndex: 'operation',
        render: (value: any, record: any, index: number) =>
          1>0? (
            <Fragment>
            <Button icon={<EyeOutlined />}>查看</Button>
            <Button icon={<EditOutlined />}>编辑</Button>
            <Popconfirm title="确定删除吗?">
            <Button  danger icon={<DeleteOutlined />}>删除</Button>
            </Popconfirm>
           </Fragment>
          ) : null,
      },
  ];
  
  const data: DataType[] = [];
  for (let i = 0; i < 46; i++) {
    data.push({
      key: i,
      name: `Edward King ${i}`,
      age: 32,
      address: `London, Park Lane no. ${i}`,
    });
  }
const Refund = () => {
    interface Option {
        value: string;
        label: string;
        children?: Option[];
      }
    const options: Option[] = [];
    const dropdownRender = (menus: React.ReactNode) => (
        <div>
          {menus}
          <Divider style={{ margin: 0 }} />
          <div style={{ padding: 8 }}>The footer is not very short.</div>
        </div>
      );
    //   表格
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      setSelectedRowKeys(newSelectedRowKeys);
    };
  
    const rowSelection: TableRowSelection<DataType> = {
      selectedRowKeys,
      onChange: onSelectChange,
      selections: [
        Table.SELECTION_ALL,
        Table.SELECTION_INVERT,
        Table.SELECTION_NONE,
        {
          key: 'odd',
          text: 'Select Odd Row',
          onSelect: changableRowKeys => {
            let newSelectedRowKeys = [];
            newSelectedRowKeys = changableRowKeys.filter((_, index) => {
              if (index % 2 !== 0) {
                return false;
              }
              return true;
            });
            setSelectedRowKeys(newSelectedRowKeys);
          },
        },
        {
          key: 'even',
          text: 'Select Even Row',
          onSelect: changableRowKeys => {
            let newSelectedRowKeys = [];
            newSelectedRowKeys = changableRowKeys.filter((_, index) => {
              if (index % 2 !== 0) {
                return true;
              }
              return false;
            });
            setSelectedRowKeys(newSelectedRowKeys);
          },
        },
      ],
    };
    return (
        <fieldset>
            <div className="listbottom">
                <div className="fromtop">
                    <div>每页显示： <Cascader style={{ width: 80 }} options={options} dropdownRender={dropdownRender} placeholder="10条" /></div>
                    <Input style={{ width: 150 }} placeholder="请输入关键字搜索" />
                </div>
                <div className="frombottom">
                    <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
                </div>
            </div>
        </fieldset>
    )
}

export default Refund